<template>
	<div class="app-container" v-loading="data.mtloading">
		<el-form :model="data.info" :rules="data.rules" class="w-full" label-width="120" ref="ruleFormRef">
			<el-form-item :label="$t('account.authority.node') + ':'" class="w-1/2">
				<el-input v-model="data.name" disabled :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item :label="$t('account.authority.nodeType') + ':'" prop="type" class="w-1/2">
				<el-select v-model="data.info.type" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('account.authority.menuNode')" :value="1" />
					<el-option :label="$t('account.authority.InterNode')" :value="2" />
					<el-option :label="$t('account.authority.authority')" :value="3" />
				</el-select>
			</el-form-item>
			<el-form-item :label="$t('account.authority.nodeName') + ':'" prop="name" class="w-1/2">
				<el-input v-model="data.info.name" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item :label="$t('account.authority.nodeRoute') + ':'" prop="url" class="w-1/2">
				<el-input v-model="data.info.url" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item :label="$t('account.authority.isButton') + ':'" prop="is_button" class="w-1/2">
				<el-select v-model="data.info.is_button" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('public.yes')" :value="1" />
					<el-option :label="$t('public.no')" :value="2" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('account.authority.authority') + ':'" prop="is_data" class="w-1/2">
				<el-select v-model="data.info.is_data" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('public.yes')" :value="1" />
					<el-option :label="$t('public.no')" :value="2" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('account.authority.nodeSort') + ':'" prop="sort" class="w-1/2">
				<el-input v-model="data.info.sort" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('account.authority.nodeStatus') + ':'" prop="status" class="w-1/2">
				<el-select v-model="data.info.status" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('public.enable')" :value="1" />
					<el-option :label="$t('public.disable')" :value="2" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('account.authority.desc') + ':'" prop="desc" class="w-1/2">
				<el-input v-model="data.info.desc" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<div class="w-2/4 text-center">
				<div class="inline-block">
					<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
					<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { addauthnode } from '@/api/account';
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()
let ruleFormRef = ref<any>();
let data = reactive({
	mtloading: false, // 加载
	name: '系统节点', // 上级节点名称
	info: { // 主体信息
		name: '',
		pid: '0',
		icon: '',
		url: '',
		desc: '',
		sort: '',
		type: 1,
		is_button: 2,
		status: 1,
		is_data: null,
	},
	rules: { // 表单验证
		name: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		url: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
	},
})

let getinfo = () => {
	let info = JSON.parse(decodeURI(route.query.l)).info
	// 添加下级
	if (info != '') {
		data.info.pid = info.node_id
		data.info.type = info.type * 1
		data.info.status = info.status * 1
		data.name = info.name
	}
}
// 保存
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			data.mtloading = true
			addauthnode(data.info).then(res => {
				data.mtloading = false
				if (res.state == 200) {
					ElMessage({
						message: $t('message.addSuccess'),
						type: 'success'
					})
					router.back()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})

		}
	})
}

// 取消
let cancell = () => {
	data.info = {
		name: '',
		pid: '0',
		icon: '',
		url: '',
		desc: '',
		sort: '',
		type: 1,
		is_button: 2,
		status: 1,
	}
	router.back()
	getinfo()
}

getinfo()

</script>